<template>
  <div>
    <div style="margin-bottom: 5px">
      <el-input
        v-model="goodsName"
        placeholder="请输入产物名"
        suffix-icon="el-icon-search"
        clearable
        style="width: 200px"
        @keyup.enter.native="loadPost"
      ></el-input>

      <div
        style="display: inline-flex; flex-direction: column; margin-left: 5px"
      >
        <el-select
          v-model="storageId"
          clearable
          placeholder="请选择仓库"
          style="margin-bottom: 5px"
        >
          <el-option
            v-for="item in storageData"
            :key="item.id"
            :label="item.storageName"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="goodsTypeId"
          clearable
          placeholder="请选择分类"
          style="margin-bottom: 5px"
        >
          <el-option
            v-for="item in goodstypeData"
            :key="item.id"
            :label="item.goodsTypeName"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-select v-model="sourceId" clearable placeholder="请选择产地">
          <el-option
            v-for="item in sourceData"
            :key="item.id"
            :label="item.sourceName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>

      <el-button type="primary" style="margin-left: 5px" @click="loadPost"
        >查询 <i class="el-icon-search"></i
      ></el-button>
      <el-button type="warning" style="margin-left: 5px" @click="resetParam"
        >重置表单 <i class="el-icon-refresh"></i
      ></el-button>
      <el-popconfirm
        style="margin-left: 5px"
        confirm-button-text="确定"
        cancel-button-text="我再想想"
        icon="el-icon-info"
        icon-color="red"
        title="您确定删除吗？"
        @confirm="del"
      >
        <el-button type="danger" slot="reference"
          >删除选中记录 <i class="el-icon-remove-outline"></i
        ></el-button>
      </el-popconfirm>
    </div>
    <el-table
      v-loading="isLoading"
      :data="tableData"
      :header-cell-style="{ background: '#f2f5fc', color: '#555555' }"
      border
      style="min-height: 484px"
      highlight-current-row
      @current-change="selectCurrentChange"
    >
      <el-table-column prop="id" label="ID" width="60"></el-table-column>
      <el-table-column
        prop="goodsname"
        label="产物名"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="storagename"
        label="仓库"
        width="80"
      ></el-table-column>
      <el-table-column
        prop="goodstypename"
        label="分类"
        width="80"
      ></el-table-column>
      <el-table-column
        prop="sourcename"
        label="产地"
        width="80"
      ></el-table-column>
      <el-table-column
        prop="adminname"
        label="操作人"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="username"
        label="申请人"
        width="120"
      ></el-table-column>
      <el-table-column prop="count" label="数量" width="80"> </el-table-column>
      <el-table-column
        prop="time"
        label="操作时间"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        width="1000"
      ></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'Record',
  data() {
    return {
      user: JSON.parse(localStorage.getItem('curUser')) || {},
      storageData: [],
      goodstypeData: [],
      sourceData: [],
      tableData: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
      goodsName: '',
      storageId: '',
      goodsTypeId: '',
      sourceId: '',
      currentRow: {},
      isLoading: false
    }
  },
  methods: {
    del() {
      if (!this.currentRow.id) {
        alert('请选择记录')
        return
      }

      this.$http.get('/record/del?id=' + this.currentRow.id).then(res => {
        // console.log(res)
        if (res.code == 200) {
          this.$message.success('操作成功！')
          this.loadPost()
        } else {
          this.$message.error('操作失败！')
        }
      })
    },
    selectCurrentChange(val) {
      this.currentRow = val
    },
    formatStorage(row) {
      let temp = this.storageData.find(item => {
        return item.id == row.storage
      })

      return temp && temp.name
    },
    formatGoodstype(row) {
      let temp = this.goodstypeData.find(item => {
        return item.id == row.goodstype
      })

      return temp && temp.name
    },
    resetForm() {
      // this.$refs.form.resetFields()
      this.form = {
        id: '',
        name: '',
        storage: '',
        goodstype: '',
        count: '',
        remark: ''
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageNum = 1
      this.pageSize = val
      this.loadPost()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNum = val
      this.loadPost()
    },
    resetParam() {
      this.goodsName = ''
      this.storageId = ''
      this.goodstypeId = ''
      this.sourceId = ''
    },
    loadStorage() {
      this.$http.get('/storage/list').then(res => {
        console.log(res)
        if (res.code == 200) {
          this.storageData = res.data
        } else {
          alert('获取数据失败')
        }
      })
    },
    loadGoodstype() {
      this.$http.get('/goodstype/list').then(res => {
        console.log(res)
        if (res.code == 200) {
          this.goodstypeData = res.data
        } else {
          alert('获取数据失败')
        }
      })
    },
    loadSource() {
      this.$http.get('/source/list').then(res => {
        console.log(res)
        if (res.code == 200) {
          this.sourceData = res.data
        } else {
          alert('获取数据失败')
        }
      })
    },
    loadPost() {
      this.isLoading = true

      this.$http
        .post('/record/listPage', {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          param: {
            goodsName: this.goodsName,
            goodsTypeId: this.goodsTypeId + '',
            storageId: this.storageId + '',
            sourceId: this.sourceId + ''
            // roleId: this.user.roleId + '',
            // userId: this.user.id + ''
          }
        })
        .then(res => {
          setTimeout(() => {
            this.isLoading = false

            console.log(res)
            if (res.code == 200) {
              this.tableData = res.data
              this.total = res.total
            } else {
              alert('获取数据失败')
            }
          }, 300)
        })
    }
  },
  beforeMount() {
    this.loadStorage()
    this.loadGoodstype()
    this.loadSource()
    this.loadPost()
  }
}
</script>

<style scoped>
::v-deep .el-table__body-wrapper {
  overflow: hidden !important;
}
</style>
